<template>
  <div class="layout-padding">
    <splitpanes>
      <pane size="40">
        <div class="layout-padding-auto layout-padding-view">
          <!--查询表单-->
          <el-form class="my-1">
            <el-form-item>
              <el-button icon="refresh"  @click="resetQuery">{{$t('basProcess.reset')}}</el-button>
              <el-button icon="el-icon-plus" type="primary"  @click="processFormDialogRef.openAddDialog()">{{$t('basProcess.add')}}
              </el-button>
              <el-button icon="el-icon-delete" type="danger" @click="handleDelete(selectObjs)">{{$t('basProcess.delete')}}</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle" style="width: 100%;height:100%"
                    :header-cell-style="tableStyle.headerCellStyle" @row-click="clickRow" stripe highlight-current-row
                    @sort-change="sortChangeHandle" @selection-change="selectionChangeHandle">
            <el-table-column type="selection" width="40" align="center"/>
            <el-table-column type="index" label="#" width="50"/>
<!--            <el-table-column prop="processCode" :label="$t('basProcess.processCode')"/>-->
            <el-table-column prop="processName" :label="$t('basProcess.processName')" 	>
							<template #default="scope">
								<el-button-group size="small">
									<el-button type="primary" class="w-[90px]">{{scope.row.processName}}</el-button>
									<el-button type="primary"  class="w-[90px]" plain>{{scope.row.processCode}}</el-button>
								</el-button-group>
							</template>
						</el-table-column>
            <el-table-column prop="warehouseCode" :label="$t('basProcess.warehouseName')" >
							<template #default="scope">
								<el-button-group size="small">
									<el-button type="success" class="w-[70px]">{{scope.row.warehouseName}}</el-button>
									<el-button type="success" class="w-[70px]" plain>{{scope.row.warehouseCode}}</el-button>
								</el-button-group>
							</template>
						</el-table-column>
<!--            <el-table-column prop="warehouseCode" :label="$t('basProcess.warehouseCode')"/>-->
            <el-table-column :label="$t('basProcess.operation')"  width="80">
              <template #default="scope">
                <el-button icon="edit"  size="small" type="primary" v-auth="'platform_basDicSet_edit'"
                           @click="processFormDialogRef.openEditDialog(scope.row)">
                </el-button>
                <!-- <el-button icon="delete" type="danger"
                           @click="handleDelete([scope.row.id])">
                  {{$t('basProcess.delete')}}
                </el-button> -->
              </template>
            </el-table-column>
          </el-table>
          <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                      v-bind="state.pagination"/>
        </div>
      </pane>
      <pane size="60">
        <div class="layout-padding-auto layout-padding-view">
          <prdLine ref="dataFormRef"></prdLine>
        </div>
      </pane>
    </splitpanes>
    <processForm ref="processFormDialogRef" @refresh="getDataList(false)"/>
  </div>
</template>

<script setup lang="ts">
import {defineAsyncComponent, reactive, ref} from "vue";
import {BasicTableProps, useTable} from "/@/hooks/table";
import {useMessage, useMessageBox} from "/@/hooks/message";
import {deleteProcessByIds, getAllProcessList} from "/@/api/platform/digital/basProcess";
import prdLine from "/@/views/digital/basProcess/prdLine.vue"
import {useI18n} from 'vue-i18n';
const {t} = useI18n();
const processForm = defineAsyncComponent(() => import('./processForm.vue'));

const processFormDialogRef = ref()

// 搜索变量
const queryRef = ref()
const dataFormRef = ref();


//左边查询工序
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {},
  pageList: getAllProcessList
})

// 点击行的时候触发
const clickRow = (row: any) => {
  dataFormRef.value.refresh(row)
}

const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  sortChangeHandle,
  downBlobFile,
  tableStyle
} = useTable(state)

// 多选变量
const selectObjs = ref([]) as any
const multiple = ref(true)
// 多选事件
const selectionChangeHandle = (objs: { id: string }[]) => {
  selectObjs.value = objs.map(({id}) => id);
  multiple.value = !objs.length;
};

// 删除操作
const handleDelete = async (ids: Array<number>) => {
  if (ids?.length === 0) {
    return useMessage().warning(t('basProcess.selectDelete'))
  }

  const idArray: IdArray = ids.map(item => (item));

  useMessageBox().confirm(t('basProcess.permanentlyDeleted')).then(async () => {
    try {
      await deleteProcessByIds({
        Ids: idArray
      })
      getDataList();
      useMessage().success(t('basProcess.deleteSuccess'));
    } catch (err: any) {
      useMessage().error(t('basProcess.deleteFaild') + err.msg)
    }
  })
};

// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  queryRef.value?.resetFields()
  getDataList(false)

}
</script>